<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Denselin's Music</title>
  <link href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css" rel="stylesheet" />
  <link rel="stylesheet" href="./style/main.css">
  <link rel="stylesheet" href="./style/kuangjia.css">
  <link rel="stylesheet" href="style/tuijian.css">
</head>

<body>
  <div class="container">
    <!-- 上方主页面 -->
    <div class="main-container">
      <!-- 左侧导航栏 -->
      <div class="left">
        <div class="logo">
          <img src="./img/logo.svg" alt="logo">
        </div>
        <div class="onlinemusic">
          <div>
            <p>在线音乐</p>
          </div>
          <ul>
            <li onclick="showPage('page1',this)"><i class="ri-home-line"></i>推荐</li>
            <li onclick="showPage('page2',this)"><i class="ri-cup-line"></i>乐馆</li>
            <li onclick="showPage('page3',this)"><i class="ri-mv-line"></i>视频</li>
          </ul>
        </div>
        <div class="mymusic">
          <div>
            <p>我的音乐</p>
          </div>
          <ul>
            <li onclick="showPage('page4',this)"><i class="ri-heart-line"></i>喜欢</li>
            <li onclick="showPage('page5',this)"><i class="ri-time-line"></i>最近播放</li>
            <li onclick="showPage('page6',this)"><i class="ri-download-2-line"></i>本地和下载</li>
            <li onclick="showPage('page7',this)"><i class="ri-customer-service-line"></i>试听列表</li>
          </ul>
        </div>
        <div class="myplaylists">
          <div>
            <p>自建歌单</p>
          </div>
          <ul>
            <li><img src="./img/liangbo.jpg" alt="img">梁博</li>
            <li><img src="./img/happy.jpg" alt="img">快乐</li>
            <li><img src="./img/quer.webp" alt="img">身心安静</li>
            <li><img src="./img/oldsong.jfif" alt="img">老歌</li>
            <li><img src="./img/enSong.webp" alt="img">英文</li>
          </ul>
        </div>
      </div>
      <!-- 顶部栏 -->

      <!-- 右侧主要内容 -->
      <div class="right">
        <div class="topBar">
          <div class="rh">
            <span class="fowardAndbackon">
              <i class="ri-arrow-left-s-line"></i>
              <i class="ri-arrow-right-s-line"></i>
            </span>
            <span class="restart"><i class="ri-restart-line"></i></span>
            <div class="seh">
              <div class="search">
                <i class="ri-search-line"></i>
                <input type="text" placeholder="搜索">
              </div>
              <span class="listhen"><i class="ri-music-fill"></i></span>
            </div>
          </div>
          <div class="lef">
            <div class="avatar"><img src="./img/avatar.jpg" alt=""></div>
            <div class="name">
              <p>Denselin</p>
            </div>
          </div>
        </div>
        <!-- 推荐内容 -->
        <div class="ma">
          <div class="page active">
            <div class="index">
              <p>Welcome to Denselin's</p>
              <p>Music Web</p>
            </div>
          </div>
          <div id="page1" class="page">

            <h2 id="recommendation-title">今日推荐</h2>
            <div id="recommendation-section">
                <div class="recommendation-item">
                    <a href="playlist1.html">
                        <img src="./img/tj1.1.png" alt="推荐歌曲1">
                        <h3>首选猜你喜欢</h3>
                    </a>
                </div>
                <div class="recommendation-item">
                    <a href="playlist2.html">
                        <img src="./img/tj1.2.png" alt="推荐歌曲2">
                        <h3>每日30首</h3>
                    </a>
                </div>
                <div class="recommendation-item">
                    <a href="playlist3.html">
                        <img src="./img/tj1.3.png" alt="推荐歌曲3">
                        <h3>杜比专区</h3>
                    </a>
                </div>
                <div class="recommendation-item">
                    <a href="playlist4.html">
                        <img src="./img/tj1.4.png" alt="推荐歌曲4">
                        <h3>百万收藏</h3>
                    </a>
                </div>
                <div class="recommendation-item">
                    <a href="playlist5.html">
                        <img src="./img/tj1.5.png" alt="推荐歌曲5">
                        <h3>新歌推荐</h3>
                    </a>
                </div>
            </div>
            <!-- 新的推荐部分 -->
            <h2 id="newrecommendation-title">歌单补给站</h2>
            <div id="new-recommendation-section">
              <div class="recommendation-item">
                  <a href="playlist6.html">
                      <img src="./img/tj2.1.png" alt="推荐歌曲6">
                      <p>111</p>
                  </a>
              </div>
              <div class="recommendation-item">
                  <a href="playlist7.html">
                      <img src="./img/tj2.2.png" alt="推荐歌曲7">
                  </a>
              </div>
              <div class="recommendation-item">
                  <a href="playlist8.html">
                      <img src="./img/tj2.3.png" alt="推荐歌曲8">
                  </a>
              </div>
              <div class="recommendation-item">
                  <a href="playlist9.html">
                      <img src="./img/tj2.4.png" alt="推荐歌曲9">
                  </a>
              </div>
              <div class="recommendation-item">
                  <a href="playlist10.html">
                      <img src="./img/tj2.5.png" alt="推荐歌曲10">
                  </a>
              </div>
              <div class="recommendation-item">
                  <a href="playlist11.html">
                      <img src="./img/tj2.6.png" alt="推荐歌曲11">
                  </a>
              </div>
              <div class="recommendation-item">
                  <a href="playlist12.html">
                      <img src="./img/tj2.7.png" alt="推荐歌曲12">
                  </a>
              </div>
              <div class="recommendation-item">
                  <a href="playlist13.html">
                      <img src="./img/tj2.8.png" alt="推荐歌曲13">
                  </a>
              </div>
              <div class="recommendation-item">
                  <a href="playlist14.html">
                      <img src="./img/tj2.9.png" alt="推荐歌曲14">
                  </a>
              </div>
              <div class="recommendation-item">
                  <a href="playlist15.html">
                      <img src="./img/tj2.10.png" alt="推荐歌曲15">
                  </a>
              </div>
              <div class="recommendation-item">
                  <a href="playlist16.html">
                      <img src="./img/tj2.11.png" alt="推荐歌曲16">
                  </a>
              </div>
              <div class="recommendation-item">
                  <a href="playlist17.html">
                      <img src="./img/tj2.12.png" alt="推荐歌曲17">
                  </a>
              </div>
          </div>
          <!-- 横向歌单容器 -->
      <!-- 横向歌单容器 -->
      <div class="carousel-container">
        <h2 id="horizontal-recommendation-title">大家都在听</h2>
        <div class="carousel-wrapper">
            <button id="prev-button" class="carousel-button">←</button>
            <div id="grid-recommendation-section">
                <!-- 第一行 -->
                 <div class="row">
                <div class="horizontal-item">
                    <div class="img-container">
                        <img src="./img/tj3.1.png" alt="歌曲封面">
                    </div>
                    <div class="text-container">
                        <p>いのちの名前 (生命之名)</p>
                        <span>广桥真纪子</span>
                    </div>
                </div>
                <div class="horizontal-item">
                    <div class="img-container">
                        <img src="./img/song2.jpg" alt="歌曲封面">
                    </div>
                    <div class="text-container">
                        <p>Vincent</p>
                        <span>Don McLean</span>
                    </div>
                </div>
                <div class="horizontal-item">
                    <div class="img-container">
                        <img src="./img/song3.jpg" alt="歌曲封面">
                    </div>
                    <div class="text-container">
                        <p>今夜、君の声が聞きたい</p>
                        <span>Aimer</span>
                    </div>
                </div>
            </div>
                <!-- 第二行 -->
                <div class="row">
                <div class="horizontal-item">
                    <div class="img-container">
                        <img src="./img/song4.jpg" alt="歌曲封面">
                    </div>
                    <div class="text-container">
                        <p>Shape of You</p>
                        <span>Ed Sheeran</span>
                    </div>
                </div>
                <div class="horizontal-item">
                    <div class="img-container">
                        <img src="./img/song5.jpg" alt="歌曲封面">
                    </div>
                    <div class="text-container">
                        <p>Bad Guy</p>
                        <span>Billie Eilish</span>
                    </div>
                </div>
                <div class="horizontal-item">
                    <div class="img-container">
                        <img src="./img/song6.jpg" alt="歌曲封面">
                    </div>
                    <div class="text-container">
                        <p>光るなら</p>
                        <span>Goose house</span>
                    </div>
                </div>
            </div>
    
                <!-- 第三行 -->
                <div class="row">
                <div class="horizontal-item">
                    <div class="img-container">
                        <img src="./img/song7.jpg" alt="歌曲封面">
                    </div>
                    <div class="text-container">
                        <p>Rolling in the Deep</p>
                        <span>Adele</span>
                    </div>
                </div>
                <div class="horizontal-item">
                    <div class="img-container">
                        <img src="./img/song8.jpg" alt="歌曲封面">
                    </div>
                    <div class="text-container">
                        <p>Someone Like You</p>
                        <span>Adele</span>
                    </div>
                </div>
                <div class="horizontal-item">
                    <div class="img-container">
                        <img src="./img/song9.jpg" alt="歌曲封面">
                    </div>
                    <div class="text-container">
                        <p>See You Again</p>
                        <span>Wiz Khalifa ft. Charlie Puth</span>
                    </div>
                </div>
            </div>

                <!-- 第4行 -->
                <div class="row" style="display: none;">
                <div class="horizontal-item">
                  <div class="img-container">
                      <img src="./img/song7.jpg" alt="歌曲封面">
                  </div>
                  <div class="text-container">
                      <p>Rolling in the Deep</p>
                      <span>Adele</span>
                  </div>
              </div>
              <div class="horizontal-item">
                  <div class="img-container">
                      <img src="./img/song8.jpg" alt="歌曲封面">
                  </div>
                  <div class="text-container">
                      <p>Someone Like You</p>
                      <span>Adele</span>
                  </div>
              </div>
              <div class="horizontal-item">
                  <div class="img-container">
                      <img src="./img/song9.jpg" alt="歌曲封面">
                  </div>
                  <div class="text-container">
                      <p>See You Again</p>
                      <span>4</span>
                  </div>
              </div>
          </div>

              <!-- 第5行 -->
              <div class="row" style="display: none;">
               <div class="horizontal-item">
                <div class="img-container">
                    <img src="./img/song7.jpg" alt="歌曲封面">
                </div>
                <div class="text-container">
                    <p>Rolling in the Deep</p>
                    <span>Adele</span>
                </div>
            </div>
            <div class="horizontal-item">
                <div class="img-container">
                    <img src="./img/song8.jpg" alt="歌曲封面">
                </div>
                <div class="text-container">
                    <p>Someone Like You</p>
                    <span>Adele</span>
                </div>
            </div>
            <div class="horizontal-item">
                <div class="img-container">
                    <img src="./img/song9.jpg" alt="歌曲封面">
                </div>
                <div class="text-container">
                    <p>See You Again</p>
                    <span>5</span>
                </div>
            </div>
            </div>
            <!-- 第6行 -->
            <div class="row" style="display: none;">
             <div class="horizontal-item">
              <div class="img-container">
                  <img src="./img/song7.jpg" alt="歌曲封面">
              </div>
              <div class="text-container">
                  <p>Rolling in the Deep</p>
                  <span>Adele</span>
              </div>
          </div>
          <div class="horizontal-item">
              <div class="img-container">
                  <img src="./img/song8.jpg" alt="歌曲封面">
              </div>
              <div class="text-container">
                  <p>Someone Like You</p>
                  <span>Adele</span>
              </div>
          </div>
          <div class="horizontal-item">
              <div class="img-container">
                  <img src="./img/song9.jpg" alt="歌曲封面">
              </div>
              <div class="text-container">
                  <p>See You Again</p>
                  <span>最后一个</span>
              </div>
          </div>
          </div>

            </div>
            <button id="next-button" class="carousel-button">→</button>
        </div>
      </div>
        
<!--推荐部分结束--> 

            </div>
            
            


        
          
            <div id="page2" class="page">
              <h2>这是乐馆页面</h2>
              <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            </div>
            <div id="page3" class="page">
              <h2>这是视频页面</h2>
            </div>
            <div id="page4" class="page">
              <div class="favor">

              </div>
            </div>
            <div id="page5" class="page">
              <h2>这是最近播放页面</h2>
            </div>
            <div id="page6" class="page">
              <h2>这是本地和下载页面</h2>
            </div>
            <div id="page7" class="page">
              <h2>这是试听列表页面</h2>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部播放器 -->
    <div class="buttom">
      <div class="start">
        <div class="music-small-img">
          <a href="#"><img src="./img/liangbo.jpg" alt="music-logo"></a>
        </div>
        <div class="music-information">
          <ul>
            <li>歌曲名字</li>
            <li>歌手</li>
          </ul>
        </div>
        <div class="selections">
          <p>
            <i class="ri-heart-3-line"></i>
            <i class="ri-message-3-line"></i>
            <i class="ri-menu-2-fill"></i>
          </p>
        </div>
      </div>
      <div class="center">
        <div class="mediaControl">
          <ul>
            <li><i class="ri-skip-back-fill"></i></li>
            <li onclick="toggleIcon(this)"><i class="ri-pause-line"></i></li>
            <li><i class="ri-skip-forward-fill"></i></li>
          </ul>
        </div>
        <div class="processBar">

        </div>
      </div>
      <div class="end">wohenhao</div>
    </div>
  </div>
  <script>
    function toggleIcon(element) {
      const icon = element.querySelector('i');
      if (icon.classList.contains('ri-pause-line')) {
        icon.classList.remove('ri-pause-line');
        icon.classList.add('ri-play-fill');
      } else {
        icon.classList.remove('ri-play-fill');
        icon.classList.add('ri-pause-line');
      }
    }

    function showPage(page, element) {
      const pages = document.querySelectorAll('.page');
      pages.forEach((p) => p.style.display = 'none');
      document.getElementById(page).style.display = 'block';

      const navItems = document.querySelectorAll('.left ul li');
      navItems.forEach(item => item.classList.remove('click'));
      element.classList.add('click');
    }
  
 

<!-- 横向歌单滚动按钮 -->
  
let currentRow = 0; // 当前显示的行索引
const rows = document.querySelectorAll('#grid-recommendation-section .row');

function showCurrentRows() {
    // 隐藏所有行
    rows.forEach((row, index) => {
        row.style.display = (index >= currentRow && index < currentRow + 3) ? 'flex' : 'none';
    });
}

document.getElementById('next-button').addEventListener('click', () => {
    if (currentRow < rows.length - 3) {
        currentRow += 3; // 显示下一组行
    } else {
        currentRow = 0; // 循环到开头
    }
    showCurrentRows();
});

document.getElementById('prev-button').addEventListener('click', () => {
    if (currentRow > 0) {
        currentRow -= 3; // 显示上一组行
    } else {
        currentRow = rows.length - 3; // 循环到最后三行
    }
    showCurrentRows();
});
1
// 初始化显示第一组行
showCurrentRows();




</script>
 
 

</body>

</html>